<template>
    <div id="addFill">
       <div class="jx-content">
            <div class="topcoumt">
                <div class="search-box fl">
                    <el-form :inline="true"  :model="Form" label-width="120px" class="fl">
                        <el-form-item label="关键字">
                            <el-input v-model="Form.name" placeholder="请输入关键字" ></el-input>
                        </el-form-item>
                    </el-form> 
                      <button class="button-style" @click="searchFn">搜 索</button> 
                 </div>
                  <div class="btn-group fr">
                    <button class="button-style"  @click="myquestion" >我 要 提 问</button>
                </div>
            </div>
            <el-dialog class="dialog-check" title="我要提问" :visible.sync="dialogVisible" width="35%">
               <el-form ref="formlist" :inline="true"  :rules="rules" :model="formlist" >
                    <el-form-item label="问题标题 :" prop="title">
                        <el-input v-model="formlist.title"  placeholder="请输入问题标题"></el-input>
                    </el-form-item>
                     <div class="answer-editor">
                        <p class="title">问题描述 :</p>
                        <mavonEditor ref="question"></mavonEditor>
                    </div>
               </el-form>
                <div class="btn-center">
                    <button class="button-style" @click="submit('formlist')" >提 交</button>
                </div>
            </el-dialog>
           <div v-if="listansers!=''">
                <div class="listanser">
                    <ul>
                        <li v-for='(item,index) in listansers' :key="index">
                            <div class="fl listanser-list">
                                <div class="fl listanser-list-answer">
                                    <p>{{item.problemCount}}</p>
                                    <p>回答</p>
                                </div>
                                <div class="fl imgpic">
                                    <img src="../../../assets/images/re-zip3.png">
                                    <!-- <img :src="item.icon"> -->
                                </div>
                                <div class="fl question-list">
                                    <router-link :to="{path:'/MyCourses/Interflow/AnswerListDetail',query: {id:item.id}}">
                                        <p class="question-list-why">{{item.problemName}}</p>
                                        <div class="question-time">
                                            <div class="fl">
                                                <i class="iconfont  icon-wode"></i>
                                                <span class='stuname'>{{item.userName}}{{item.roleName}}</span>
                                            </div> 
                                            <span class='timeicon'>
                                                <i class="iconfont  icon-wode"></i>
                                                <span>{{item.problemTime}}</span>
                                            </span>
                                        </div>
                                    </router-link>
                                </div>
                            </div>
                             <div class="fr Forbidden" v-if="item.roleName=='学生'" >
                                <button class="Forbidden-btn" @click="ForbiddeWords(item.userId,item.courseId,item.forBidden,item.userName)" v-if="item.forBidden==false">禁 言</button> 
                                <button class="Forbidden-btn-dark" v-if="item.forBidden==true">已 禁 言</button>
                            </div> 
                        </li>
                    </ul>
                </div>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
               </el-pagination>
           </div>
           <div class="empty" v-else >
                <i class="iconfont icon-zanwushuju"></i>
                <p>暂无数据</p>
           </div>
        </div>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    import $ from "jquery";
    export default {
        components: { mavonEditor },
        data () {
            return {
                Form:{
                    name:''
                },
                dialogVisible:false,
                formlist:{
                   title:''
                },
                forBidden:'',
                listansers:[],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                rules: {
                    title: [
                        { required: true, message: '请输入问题标题', trigger: 'blur' },
                        {  max: 50, message: '长度最多50个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
           this.init()
        },
        methods: {
            init() {
                let self = this
                self.$http.get('/tes/problemCommunication/listProblemPages?pageNum='+self.currentPage +'&pageSize='+self.pagesize + '&courseId='+1+'&keyWords='+self.Form.name).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        //console.log(res.data.pageDTO.content)
                        self.listansers = res.data.pageDTO.content
                        self.totalCount = res.data.pageDTO.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //搜索
            searchFn(){
                this.currentPage = 1
                this.init()
            },
            //我要提问
            myquestion(){
              this.dialogVisible = true
              this.formlist.title=''
              this.$refs.question.value=''
            },
            //提交
            submit(formlist){
                let self = this
                let answer=this.$refs.question.renders
				self.$refs[formlist].validate((valid) => {
                    if (valid) {
                        self.$http.post('/tes/problemCommunication/askQuestions',{
                            problemName: self.formlist.title,
                            courseId:1,
                            problemContent:answer
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '提交成功',
                                    type: 'success'
                                })
                                self.init()
                                self.dialogVisible = false
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
                // let answer=this.$refs.question.renders
                // console.log(this.formlist.title)
                // console.log(answer)
            },

           //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
             //详情
            ForbiddeWords(userId,courseId,forBidden,userName){
                let self = this
                self.$confirm('是否对'+userName+'禁言?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
				self.$http.post('/tes/problemCommunication/forbiddenWords',{  
                     userId:userId,
                     courseId:courseId,
                     isForbidden:!forBidden
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '禁言成功',
                            type: 'success'
                        })
                       self.init()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                    },(err) => {
						console.log('err');    
                    })
                 }).catch(() => {
			   })
            }

        }
    }
</script>
<style scoped>
.button-style{
    margin-top: 5px;
}
</style>

<style lang="scss">
 @import "./../../../styles/layout/color_variables";
  #addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
    .topcoumt{
       border-bottom:1px solid #e8e8e8;
       overflow: hidden;
       .el-input .el-input__inner{
        width: 300px;
      }
    }
    .dialog-check{
       .el-form-item__content {
            .el-input__inner{
                width: 300px;
            }
        }
        .answer-editor{
            padding: 0 12px;
            .title{
                font-size: 14px;

                line-height: 30px;
            }
        }
        .btn-center{
            text-align: center;
            padding: 20px 0;
        }

    }
    .listanser{
        clear: both;
         ul>li{
            height: 60px;
            border-bottom:1px solid #e8e8e8;
            padding: 20px;
             .Forbidden{
                margin-top: 13px;
                margin-right: 30px;
                .Forbidden-btn{
                    width: 65px;
                    height: 25px;
                    border: 1px solid #2b85ed;
                    border-radius: 20px;
                    color: #2b85ed;
                    cursor: pointer;
                }
                .Forbidden-btn-dark{
                     width: 65px;
                    height: 25px;
                    border: 1px solid #999999;
                    border-radius: 20px;
                    color: #999999;
                    cursor: pointer;

                }
           }
        }
        .listanser-list{
           padding-top: 10px;
           .listanser-list-answer{
               color: #2180ec;
               margin-right: 20px;
               margin-top: 10px;
               text-align: center;
               &>p{
                   font-size: $fs16;
                   margin-bottom:5px; 
               }
           }
           .imgpic{
               margin-right: 20px;
               img{
                border-radius: 50%;
               }
           }
           .question-list{
               margin-top: 4px;
               .question-list-why{
                   margin-bottom: 12px;
                   font-size: 16px;
                   overflow: hidden;
                   width: 600px;
                   white-space: nowrap;
                   text-overflow:ellipsis;
                }
                .question-time{
                    color: #999999; 
                    .stuname{
                       color:$table-gray; 
                    }
                    .timeicon{
                        margin:0 10px;
                            .times{
                                color:$table-gray; 
                            } 
                    }
                    .teachername{
                        .teacher{
                            position: relative;
                            right: -25px;
                            color: #fff;
                            font-size: 14px;
                            font-weight: normal
                         }
                        #triangle-left{
                            width:0px;
                            height:0px;
                            border-top:12px solid transparent;
                            border-bottom:12px solid transparent;
                            border-right:16px solid $blue;
                            display:inline-block;
                            vertical-align: middle;
                            margin-left: -23px
                        } 
                      .square{
                            width: 35px;
                            height: 24px;
                            background: $blue;
                            display: inline-block;
                            margin-left: -5px;
                            margin-bottom: 0px
                      }
                    }
                    i{
                        vertical-align:middle
                    }
                }
           }
           
        }
    }
     .empty{
          padding:100px 0;
          text-align:center;
          .icon-zanwushuju{
              font-size: 100px;
              color: #474747
          }
        }
    
  }
</style>